import React from 'react'
import { Popup, PopupHeader, Flex, FlexItem, Button, Toast, Toptips } from 'react-weui'
import ColorAndSize from './ProductSelectColorAndSize'
import SelectNum from './ProductSelectNum'


export default class ProductSelectPopup extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			num: 1,
			showToast: false,
        	toastTimer: null,
        	warnTimer: null,
        	added: false,
        	showWarn: false,
        	colorId: null,
        	sizeId: null,
		}
		this.hide = this.hide.bind(this)
		this.getBuyNum = this.getBuyNum.bind(this)
		this.addShoppingCart = this.addShoppingCart.bind(this)
		this.showSuccToast = this.showSuccToast.bind(this)
		this.showWarnTip = this.showWarnTip.bind(this)
		this.handleBuyOrAdd = this.handleBuyOrAdd.bind(this)
		this.getColorIdAndSizeId = this.getColorIdAndSizeId.bind(this)
	}

	hide(){
		this.props.handleHide()
	}

	addShoppingCart(){
		const session = localStorage.getItem('session');
		const isAuth = localStorage.getItem('isAuthenticated');  
		const sizeId = this.state.sizeId;
		const colorId = this.state.colorId;
		if(!session || !isAuth) {
			this.showWarnTip();
			return;
		}
		console.log(this.state.colorId, this.state.sizeId);
		this.props.shoppingCartActions.addShoppingCart(this.props.goodsId, this.state.num, colorId, sizeId);
		this.setState({
			added: true
		})
	}

	getBuyNum(num) {
		this.setState({ num });
	}

	showSuccToast() {
        this.setState({showToast: true});
        this.state.toastTimer = setTimeout(()=> {
            this.setState({showToast: false});
        }, 2000);
    }

    showWarnTip() {
    	this.setState({
    		showWarn: true
    	});
    	this.state.warnTimer = setTimeout(()=> {
    		this.setState({ showWarn: false });
    	}, 2000);
    }

    handleBuyOrAdd() {
    	const role = this.props.role;
    	if(role === 0) {
    		this.addShoppingCart();
    	}else {
    		alert('fsdf')
    	}
    }

    getColorIdAndSizeId(colorId, sizeId) {
    	this.setState({
    		colorId,
    		sizeId
    	})
    }

    componentWillReceiveProps(nextProps) {
		if(this.state.added && nextProps.isAdded === true) {
			this.setState({ added: false });
			this.props.handleHide();
			this.showSuccToast();
		}
	}

    componentWillUnmount() {
        this.state.toastTimer && clearTimeout(this.state.toastTimer);
        this.state.warnTimer && clearTimeout(this.state.toastTimer);
    }
	render() {
		const { goodData } = this.props;
		const btnStyle = {
            display: this.props.isBar? 'none' : 'block',
            padding: '5px'
		};
		return (
			<div>
				<Toast icon="success-no-circle" show={this.state.showToast}>已添加到购物车</Toast>
			    <Popup
					show={this.props.bottomShow}
					onRequestClose={this.hide}
				>
					<PopupHeader
						left="取消"
						leftOnClick={this.hide}
						rightOnClick={this.hide}
					/>
					<ColorAndSize goodData={goodData} getColorIdAndSizeId={this.getColorIdAndSizeId} />
					<SelectNum  getBuyNum={this.getBuyNum} />
					<Flex>
						<FlexItem style={btnStyle}>
							<Button 
								type="primary" 
								style={{ background: 'orange'}} 
								onClick={this.addShoppingCart}
							>加入购物车</Button>
						</FlexItem>
						 <Toptips type="warn" show={this.state.showWarn}>亲你还没登录呢</Toptips>
						<FlexItem style={btnStyle}>
						    <Button type="warn">立即购买</Button>
						</FlexItem>
						<FlexItem style={{ display: this.props.isBar? 'block' : 'none'}}>
						   <Button type="warn" onClick={this.handleBuyOrAdd} >确定</Button>
						</FlexItem>
					</Flex>
					
				</Popup>
			</div>
		);
	}
}
